<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="新增商家券活动"
      :ghost="false"
      @back="() => $router.go(-1)"
    ></a-page-header>

    <page-header-wrapper>
      <a-card :bordered="false">
        <a-form-model
          ref="alipayForm"
          :model="alipayForm"
          :rules="alipayRules"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 11 }"
        >
          <a-form-model-item label="小程序" prop="id">
            <a-select placeholder="请选择小程序" v-model="alipayForm.id">
              <a-select-option :value="item.id" v-for="item of idList" :key="item.id">
                {{ item.app_name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="系统券" prop="coupon_id">
            <a-select placeholder="请选择系统券" v-model="alipayForm.coupon_id">
              <a-select-option :value="item.id" v-for="item of couponList" :key="item.id">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="发放时间" prop="publish_start_time">
            <a-range-picker
              allowClear
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              :placeholder="['开始时间', '结束时间']"
              v-model="queryTime"
              @change="changeTime"
            />
          </a-form-model-item>

          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button v-loading="btnLoading" type="primary" @click="onSubmit"> 提交 </a-button>
            <a-button style="margin-left: 10px" @click="$router.go(-1)"> 取消 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-card>
    </page-header-wrapper>
  </div>
</template>

<script>
import { createActivity, storeCouponList } from '@/api/marketing/alipayPromotion'
import { alipayList } from '@/api/setting/applet'

export default {
  data() {
    return {
      serviceList: [],
      btnLoading: false,
      idList: [],
      materialList: [],
      queryTime: [],
      couponList: [],

      alipayForm: {
        id: '',
        coupon_id: '',
        publish_start_time: '',
        publish_end_time: ''
      },

      alipayRules: {
        id: [{ required: true, message: '请选择小程序', trigger: 'change' }],
        coupon_id: [{ required: true, message: '请选择系统券', trigger: 'change' }],
        publish_start_time: [{ required: true, message: '请选择券发放时间', trigger: 'change' }]
      }
    }
  },

  methods: {
    // 切换筛选时间
    changeTime(e) {
      if (e.length) {
        this.alipayForm.publish_start_time = e[0]
        this.alipayForm.publish_end_time = e[1]
      } else {
        this.alipayForm.publish_start_time = ''
        this.alipayForm.publish_end_time = ''
      }
    },

    // 点击提交
    onSubmit() {
      this.$refs.alipayForm.validate(async valid => {
        if (valid) {
          let alipayForm = JSON.parse(JSON.stringify(this.alipayForm))

          this.btnLoading = true
          const res = await createActivity(alipayForm)
          this.btnLoading = false

          if (!res.code) {
            this.$message.success(res.msg)
            this.$router.back()
            return
          }

          this.$message.error(res.msg)
        } else {
          return false
        }
      })
    }
  },

  async mounted() {
    const hide = this.$message.loading('请稍等', 0)
    let res = await alipayList()
    if (!res.code && res.data.length) {
      this.idList = res.data
    }

    storeCouponList({
      pageNo: 1,
      pageSize: 100000
    }).then(res => {
      this.couponList = res.data.data
    })

    hide()
  }
}
</script>

<style lang="less" scoped>
.flexBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &:last-of-type {
    margin-bottom: 0;
  }

  .inp {
    flex: 1;
  }

  .btn {
    margin-left: 10px;
  }
}
</style>
